<template>
  <div>
    <a-button type="primary" @click="visible = true">
      New Collection
    </a-button>
    <a-modal
      v-model:visible="visible"
      title="Create a new collection"
      ok-text="Create"
      cancel-text="Cancel"
      @ok="onOk"
    >
      <a-form ref="formRef" :model="formState" layout="vertical" name="form_in_modal">
        <a-form-item
          v-for="(item,index) in items"
          :key="index"
          :name="item.name"
          :label="item.label"
          :rules="item.rules"
        >
          <a-input v-model:value="formState[item.dataIndex]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, toRaw } from 'vue'

export default defineComponent({
  setup() {
    const formRef = ref()
    const visible = ref(false)
    const formState = ref<any>({
      title: '',
      description: '',
      modifier: 'public'
    })

    const items = ref<any>([

      {
        name: 'title',
        label: 'Title',
        dataIndex: 'title',
        rules: [{ required: true, message: 'Please input the title of collection!' }]

      }

    ])

    const onOk = () => {
      formRef.value
        .validateFields()
        .then((values:any) => {
          console.log('Received values of form: ', values)
          console.log('formState: ', toRaw(formState))
          visible.value = false
          formRef.value.resetFields()
          console.log('reset formState: ', toRaw(formState))
        })
        .catch((info:any) => {
          console.log('Validate Failed:', info)
        })
    }

    return {
      formState,
      items,
      formRef,
      visible,
      onOk
    }
  }
})
</script>
<style>
.collection-create-form_last-form-item {
  margin-bottom: 0;
}
</style>
